<template>
  <q-page>
    <q-card class="q-ma-sm">
      <q-card-title class="card_head"><q-icon name="home" />&nbsp;主要信息</q-card-title>
      <q-card-main>
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" :error="$v.fields.hostname.$error" :warning="msg.hostname !== ''" v-model="fields.hostname"
             :float-label="$v.fields.hostname.$error ? '主机名必填': msg.hostname === '' ? '主机名' : msg.hostname"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" :error="$v.fields.ip.$error" v-model="fields.ip" :warning="msg.ip !== ''"
              :float-label="$v.fields.ip.$error ? 'IP必填': msg.ip === '' ? '主机IP' : msg.ip"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-select class="q-ma-sm" :error="$v.fields.asset_type.$error" separator :options="type.items"
              :float-label="$v.fields.asset_type.$error ? '请输选择类型' : '设备类型'" v-model="fields.asset_type"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-select class="q-ma-sm" float-label="主机状态" separator v-model="fields.status" :options="status.items"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" :error="$v.fields.uuid.$error" v-model="fields.uuid" :warning="msg.uuid !== ''"
             :float-label="$v.fields.uuid.$error ? 'UUID必填': msg.uuid === '' ? 'UUID' : msg.uuid"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.mac" float-label="MAC地址"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.server_id" float-label="server_id"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-select class="q-ma-sm" float-label="负责人" separator v-model="fields.re_per" :options="re_per.items"/>
          </div>
        </div>
      </q-card-main>
    </q-card>
    <q-card class="q-ma-sm">
      <q-card-title class="card_head"><q-icon name="airplay" />&nbsp;硬件信息</q-card-title>
      <q-card-main>
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.cpu_model" float-label="CPU型号"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" type="number" v-model="fields.num_cpus" float-label="CPU数量"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" type="number" v-model="fields.mem_total" float-label="内存"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.disks" float-label="磁盘"/>
          </div>
        </div>
      </q-card-main>
    </q-card>
    <q-card class="q-ma-sm">
      <q-card-title class="card_head"><q-icon name="settings" />&nbsp;系统信息</q-card-title>
      <q-card-main>
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.os" float-label="操作系统"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.osrelease" float-label="系统版本"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.kernel" float-label="内核"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.kernelrelease" float-label="内核版本"/>
          </div>
        </div>
      </q-card-main>
    </q-card>
    <q-card class="q-ma-sm">
      <q-card-title class="card_head"><q-icon name="attach_file" />&nbsp;附加信息</q-card-title>
      <q-card-main>
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.serialnumber" float-label="SN号码"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.manufacturer" float-label="厂商名"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.escode" float-label="快速服务代码"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.housecode" float-label="机房编号"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" type="number" v-model="fields.disk" float-label="磁盘总容量"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-datetime class="q-ma-sm" :first-day-of-week="1" format="YYYY-MM-DD" v-model="fields.terminal_time"
                        float-label="过期日期" :clearable="true" />
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.ilo_ip" :warning="msg.ilo_ip !== ''"
                     :float-label="msg.ilo_ip === '' ? 'ilo_ip' : msg.ilo_ip"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.vip" :warning="msg.vip !== ''"
                     :float-label="msg.vip === '' ? 'vip' : msg.vip"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.uplink" float-label="上联端口"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.asset_no" float-label="固定资产编号"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" v-model="fields.position" float-label="所在位置"/>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-12">
            <q-input class="q-ma-sm" v-model="fields.memo" float-label="备注"/>
          </div>
        </div>
      </q-card-main>
    </q-card>
    <q-layout-footer>
      <q-toolbar style="min-height:35px;">
        <q-toolbar-title></q-toolbar-title>
        <q-btn class="q-mr-sm" color="info" icon="done" @click.native="submit">提交</q-btn>
        <q-btn class="q-mr-sm" color="secondary" icon="clear" @click.native="$store.dispatch('frame/jump', '/listhost')">返回</q-btn>
      </q-toolbar>
    </q-layout-footer>
  </q-page>
</template>

<script>
import newHostModule from '../../store/newHost'
import { required } from 'vuelidate/lib/validators'
export default {
  preFetch ({ store }) {
    store.registerModule('newHost', newHostModule)
    store.commit('newHost/loadSelect')
  },
  name: 'NewHost',
  data: function () {
    return this.$store.state.newHost
  },
  validations: {
    fields: {
      hostname: { required },
      ip: { required },
      asset_type: { required },
      uuid: { required } }
  },
  methods: {
    submit () {
      this.$v.fields.$touch()
      if (this.$v.fields.$error) {
        this.$q.notify('请修正页面错误！')
        return
      }
      this.$store.dispatch('newHost/save')
    }
  },
  beforeDestroy () {
    this.$store.commit('newHost/reset')
    this.$store.unregisterModule('newHost')
  }
}
</script>

<style>
</style>
